<template>
	<view>
		<view class="changePassword-content ff-bg-fff ff-font-14 ff-color-333 ff-margin-12 ff-border-radius-10">
			<view class="ff-font-weight-600 ff-padding-left-15 ff-padding-top-15 ff-font-15 ff-margin-bottom-5">修改密码
			</view>
			<view class="ff-flex-between ff-align-items-one ff-padding-15 ff-border-bottom">
				<view class="changePassword-content-title">新密码</view>
				<u-input :clearable="false" v-model="updatePassword.newPsd" input-align="right"
					class="ff-line-height-1-3" placeholder="请输入新密码" type="password" />
			</view>
			<view class="ff-flex-between ff-align-items-one ff-padding-15 ff-border-bottom">
				<view class="changePassword-content-title">确认密码</view>
				<u-input :clearable="false" v-model="updatePassword.confirmPsd" input-align="right"
					class="ff-line-height-1-3" placeholder="请确认密码" type="password" />
			</view>
			<view class="ff-flex-between ff-align-items-one ff-padding-15 ff-border-bottom">
				<view class="changePassword-content-title">手机号</view>
				<u-input :disabled="true" v-model="userInfo.phone" input-align="right" class="ff-line-height-1-3" />
			</view>
			<view class="ff-flex-between ff-align-items-one ff-padding-15 ff-border-bottom">
				<view class="changePassword-content-title">验证码</view>
				<view class="ff-align-items-one">
					<u-input :clearable="false" v-model="updatePassword.validCode" input-align="center"
						class="ff-line-height-1-3" placeholder="请输入验证码" type="number" />
					<view class="ff-margin-left-20">
						<view v-if="validCodeList.disableValidCode" @click.stop="getValidCoded" class="ff-color-blue">
							{{ validCodeList.validCodeText }}
						</view>
						<view v-else class="ff-color-cancel">{{ validCodeList.validTimeText }}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="ff-flex-between">
			<view class="changePassword-but"><u-button type="primary" shape="circle" @click="upateClick">修改密码</u-button>
			</view>
		</view>
		<f-loading ref="loading" />
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	export default {
		name: 'changePassword',
		data() {
			return {
				// 倒计时系列内容
				validCodeList: {
					disableValidCode: true, // 按钮是否可以点击
					validCodeText: '获取验证码', // 获取验证码
					validTimeText: '60秒', // 倒计时文案
					count: 60, // 倒计时秒数
					timer: null // 定时器
				},
				// 提交的参数
				updatePassword: {
					newPsd: '',
					confirmPsd: '',
					validCode: ''
				}
			};
		},
		computed: {
			...mapState({
				userInfo: modules => modules.infoList.userInfo
			})
		},
		methods: {
			...mapMutations(['changeTabberIndex']),
			// 点击获取短信验证码----发送短信验证码
			getValidCoded() {
				this.$refs.loading.openLoading('正在获取验证码···'); // 打开loading动画
				this.$http.get({
					url: `/sys/user/sendUpdPsdCode/${this.userInfo.phone}`
				}).then(res => {
					// console.log('获取短信验证码----', res);
					if (res.code == 200 && res.data) {
						this.$refs.uToast.show({
							title: '验证码发送成功',
							type: 'success'
						});
						this.validCodeList.count = 60;
						this.validCodeList.disableValidCode = false;
						this.validCodeList.timer = setInterval(() => {
							if (this.validCodeList.count > 0 && this.validCodeList.count <= 60) {
								this.validCodeList.validTimeText = this.validCodeList.count + '秒';
								this.validCodeList.count--;
							} else {
								this.validCodeList.disableValidCode = true;
								this.validCodeList.validCodeText = '重新获取';
								this.validCodeList.validTimeText = '60秒';
								clearInterval(this.validCodeList.timer);
								this.validCodeList.timer = null;
							}
						}, 1000);
					} else {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						});
					}
					this.$refs.loading.closeLoading(); // 关闭loading动画
				});
			},
			// 修改密码------提交
			upateClick() {
				if (!this.updatePassword.newPsd) {
					this.$refs.uToast.show({
						title: '请输入新密码',
						type: 'error'
					});
					return;
				}
				if (this.updatePassword.newPsd !== this.updatePassword.confirmPsd) {
					this.$refs.uToast.show({
						title: '两次密码不一致，请重新输入',
						type: 'error'
					});
					return;
				}
				if (!this.updatePassword.validCode) {
					this.$refs.uToast.show({
						title: '请输入验证码',
						type: 'error'
					});
					return;
				}
				this.$refs.loading.openLoading('提交中···'); // 打开loading动画
				this.$http
					.post({
						url: '/sys/user/updPsd',
						data: this.updatePassword
					})
					.then(res => {
						// console.log('修改密码返回的数据------', res);
						if (res.code == 200 && res.success) {
							this.$refs.uToast.show({
								title: '密码修改成功！',
								type: 'success'
							});
							let that = this;
							setTimeout(() => {
								this.changeTabberIndex(0)
								uni.clearStorageSync(); // 清空本地所有的缓存数据
								that.$pageJump.reLaunch('/pages/homePage/Home');
							}, 500);
						} else {
							this.$refs.uToast.show({
								title: res.msg,
								type: 'error'
							});
						}
						this.$refs.loading.closeLoading(); // 定义loadingTxt内容
					});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.changePassword {
		&-but {
			width: 90%;
			margin: 10% 5%;
		}
	}
</style>